<template>
  <div class="home">
    鼠标点击的页面x轴位置 ---- {{x}}
    <br>
    鼠标点击的页面y轴位置 ---- {{y}}
  </div>
</template>

<script setup>
  import { ref, onMounted, onBeforeMount } from 'vue'
  let x = ref(-1)
  let y = ref(-1)
  function getMousePosition(e) {
    // console.log(e);
    x.value = e.clientX
    y.value = e.clientY
  }
  onBeforeMount(() => {
    document.removeEventListener('click', getMousePosition)
  })

  onMounted(() => {
    // addEventListener 添加事件监听的方法 第一个是要监听的事件类型 第二个参数是监听事件的回调函数
    // 第三个参数是是否开启捕获
    document.addEventListener('click', getMousePosition, false)
  })
</script>





